import React, { Component } from "react";
import { Dialog, SwipeAction, Toast, Checkbox, Button } from "antd-mobile";
import { listFavor, delfavor } from "@api";
import { LeftOutline } from "antd-mobile-icons";
import MyTabbar from "../../components/MyTabbar";
import { getToken } from "@utils/token.js";
import "./index.scss";

export default class Favor extends Component {
  state = {
    listFavor: [],
    checkedList: []
  };
  render() {
    return (
      <div className="sc_cart">
        <div className="item-head">
          <div className="goback" onClick={() => this.props.history.go(-1)}>
            <LeftOutline />
          </div>
          <div className="title">收藏夹</div>
          <div className="gopage" >
          </div>
        </div>
        <div className="sc_citem">
          <ul>
            {this.state.listFavor ?
              this.state.listFavor.map((item) => (
                <li key={item.goodsName}>
                  <SwipeAction rightActions={[{ key: "delete", text: "删除", color: "danger", onClick: (value) => { this.delfavor(value, item.goodsId) } }]} >
                    <div className="item_box">
                      <div className="itemcheck clearfix">
                        <Checkbox onChange={(value) => this.checkedList(value, item.goodsId)} />
                      </div>
                      <div className="iteminfo">
                        <div className="item_img">
                          <img src={item.pic} alt="" />{" "}
                        </div>
                        <div className="item_msg">
                          <div className="msg_name">{item.goodsName}</div>
                        </div>
                      </div>
                    </div>
                  </SwipeAction>
                </li>
              ))
              :
              <img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb209937dc2276a7cb5a47fb831879af25c52fa1b25567-NGX9jR_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643854399&t=38b125f8e1cfb1e6206009fd86f762df' className='nullimg' alt='nullimg' />
            }
          </ul>
        </div>
        <div className="postorder clearfix">
          <div className="allcheck">
            {/* <Checkbox checked={this.state.allcheck} onChange={(value) => this.setAllSelect(value)} /><span>全选</span> */}
          </div>
          <div className="orderbutton"><Button color='danger' onClick={this.delfavor}>删除选中</Button></div>
        </div>
        <MyTabbar pathname={this.props.match.path} allNum={this.state.allNum} ></MyTabbar>
      </div>
    );
  }
  componentDidMount() {
    this.listFavor();
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  // 获取收藏列表
  listFavor = async () => {
    await listFavor({
      token: getToken(),
    }).then((res) => {
      console.log(res);
      if (res.data.code === 0) {
        this.setState({
          listFavor: res.data.data,
        })
      }
      if (res.data.code === 700) {
        this.setState({
          listFavor: null,
        })
        return false
      }
    })
  }
  // 选中
  checkedList = (value, id) => {
    if (value === true) {
      this.setState({
        checkedList: [...new Set([...this.state.checkedList, id])]
      })
    }
    if (value === false) {
      for (let i = 0; i < this.state.checkedList.length; i++) {
        if (this.state.checkedList[i] === id) {
          let checkedList = this.state.checkedList
          checkedList.splice(i, 1)
          this.setState({
            checkedList: checkedList
          })
          i--;
        }
      }
    }
  }
  // 删除
  delfavor = (value, id) => {
    Dialog.confirm({
      content: '是否删除？',
      onConfirm: async () => {
        await delfavor({
          type: 0,
          goodsId: id ? id : this.state.checkedList.join(','),
          token: getToken()
        }).then((res) => {
          console.log(res);
        })
        this.listFavor();
        Toast.show({
          icon: 'success',
          content: '删除成功'
        })
      },
    })
  }
}
